﻿/*
This CSS file contains generic and most frequently used CSS classes. 
These classes should only be used in following scenarios:
1. To provide hotfix/quick fix for any ongoing production issues.
2. If you have to create a CSS class and it ends up with just two (or three) style attributes, you 
   can use utility classes instead. Consider following example where you are trying to create a CSS class 
   for a DIV with ID as "logo":
   div#logo { z-index:999; display:block; }
   Instead, you may assign utility equilent CSS classes to div#logo, like following:
   <div id="logo" class="z-hover show">&nbsp;</div>
*/

/*CAUTION: CSS CLASSES DEFINED HERE SHOULD WORK FOR BOTH SCREEN AND PRINT MEDIAS.*/

.z-modal { z-index:9999; }
.z-hover { z-index:999; }
.z-tooltip { z-index:99; }

.show { display:block; }
.hide { display:none; }

.vible    { visibility:visible; }
.invible  { visibility:hidden; }

.pos-abs { position:absolute; }
.pos-rel { position:relative; }
.pos-sta { position:static; }

/*standard padding properties*/
.p-0,    ._p-0 *		{ padding:0px;  }
.p-xxs,  ._p-xxs *		{ padding:1px;  }
.p-xs,   ._p-xs *		{ padding:2px;  }
.p-s,    ._p-s *		{ padding:5px;  }
.p-m,    ._p-m *		{ padding:10px; }
.p-l,    ._p-l *		{ padding:15px; }
.p-xl,   ._p-xl *		{ padding:20px; }
.p-xxl,  ._p-xxl *		{ padding:25px; } 
.p-xxxl, ._p-xxxl *		{ padding:30px; } 
.pl-0,    ._pl-0 *		{ padding-left:0px;  }
.pl-xxs,  ._pl-xxs *	{ padding-left:1px;  }
.pl-xs,   ._pl-xs *		{ padding-left:2px;  }
.pl-s,    ._pl-s *		{ padding-left:5px;  }
.pl-m,    ._pl-m *		{ padding-left:10px; }
.pl-l,    ._pl-l *		{ padding-left:15px; }
.pl-xl,   ._pl-xl *		{ padding-left:20px; }
.pl-xxl,  ._pl-xxl *	{ padding-left:25px; } 
.pl-xxxl, ._pl-xxxl *	{ padding-left:30px; } 
.pr-0,    ._pr-0 *		{ padding-right:0px;  }
.pr-xxs,  ._pr-xxs *	{ padding-right:1px;  }
.pr-xs,   ._pr-xs *		{ padding-right:2px;  }
.pr-s,    ._pr-s *		{ padding-right:5px;  }
.pr-m,    ._pr-m *		{ padding-right:10px; }
.pr-l,    ._pr-l *		{ padding-right:15px; }
.pr-xl,   ._pr-xl *		{ padding-right:20px; }
.pr-xxl,  ._pr-xxl *	{ padding-right:25px; } 
.pr-xxxl, ._pr-xxxl *	{ padding-right:30px; } 
.pt-0,    ._pt-0 *		{ padding-top:0px;  }
.pt-xxs,  ._pt-xxs *	{ padding-top:1px;  }
.pt-xs,   ._pt-xs *		{ padding-top:2px;  }
.pt-s,    ._pt-s *		{ padding-top:5px;  }
.pt-m,    ._pt-m *		{ padding-top:10px; }
.pt-l,    ._pt-l *		{ padding-top:15px; }
.pt-xl,   ._pt-xl *		{ padding-top:20px; }
.pt-xxl,  ._pt-xxl *	{ padding-top:25px; } 
.pt-xxxl, ._pt-xxxl *	{ padding-top:30px; } 
.pb-0,    ._pb-0 *		{ padding-bottom:0px;  }
.pb-xxs,  ._pb-xxs *	{ padding-bottom:1px;  }
.pb-xs,   ._pb-xs *		{ padding-bottom:2px;  }
.pb-xs,   ._pb-xs *		{ padding-bottom:2px;  }
.pb-s,    ._pb-s *		{ padding-bottom:5px;  }
.pb-m,    ._pb-m *		{ padding-bottom:10px; }
.pb-l,    ._pb-l *		{ padding-bottom:15px; }
.pb-xl,   ._pb-xl *		{ padding-bottom:20px; }
.pb-xxl,  ._pb-xxl *	{ padding-bottom:25px; } 
.pb-xxxl, ._pb-xxxl *	{ padding-bottom:30px;  }

/*standard margin properties*/
.m-0,		._m-0 *		{ margin:0px;  }
.m-xxs,		._m-xxs *	{ margin:1px;  }
.m-xs,		._m-xs *	{ margin:2px;  }
.m-s,		._m-s *		{ margin:5px;  }
.m-m,		._m-m *		{ margin:10px; }
.m-l,		._m-l *		{ margin:15px; }
.m-xl,		._m-xl *	{ margin:20px; }
.m-xxl,		._m-xxl *	{ margin:25px; } 
.m-xxxl,	._m-xxxl *	{ margin:30px; } 
.ml-0,		._ml-0 *	{ margin-left:0px;  }
.ml-xxs,	._ml-xxs *	{ margin-left:1px;  }
.ml-xs,		._ml-xs *	{ margin-left:2px;  }
.ml-s,		._ml-s *	{ margin-left:5px;  }
.ml-m,		._ml-m *	{ margin-left:10px; }
.ml-l,		._ml-l *	{ margin-left:15px; }
.ml-xl,		._ml-xl *	{ margin-left:20px; }
.ml-xxl,	._ml-xxl *	{ margin-left:25px; } 
.ml-xxxl,	._ml-xxxl * { margin-left:30px; } 
.mr-0,		._mr-0 *	{ margin-right:0px;  }
.mr-xxs,	._mr-xxs *	{ margin-right:1px;  }
.mr-xs,		._mr-xs *	{ margin-right:2px;  }
.mr-s,		._mr-s *	{ margin-right:5px;  }
.mr-m,		._mr-m *	{ margin-right:10px; }
.mr-l,		._mr-l *	{ margin-right:15px; }
.mr-xl,		._mr-xl *	{ margin-right:20px; }
.mr-xxl,	._mr-xxl *	{ margin-right:25px; } 
.mr-xxxl,	._mr-xxxl * { margin-right:30px; } 
.mt-0,		._mt-0 *	{ margin-top:0px; }
.mt-xxs,	._mt-xxs *	{ margin-top:1px;  }
.mt-xs,		._mt-xs *	{ margin-top:2px;  }
.mt-s,		._mt-s *	{ margin-top:5px;  }
.mt-m,		._mt-m *	{ margin-top:10px; }
.mt-l,		._mt-l *	{ margin-top:15px; }
.mt-xl,		._mt-xl *	{ margin-top:20px; }
.mt-xxl,	._mt-xxl *	{ margin-top:25px; } 
.mt-xxxl,	._mt-xxxl * { margin-top:30px; } 
.mb-0,		._mb-0 *	{ margin-bottom:0px;  }
.mb-xxs,	._mb-xxs *	{ margin-bottom:1px;  }
.mb-xs,		._mb-xs *	{ margin-bottom:2px;  }
.mb-s,		._mb-s *	{ margin-bottom:5px;  }
.mb-m,		._mb-m *	{ margin-bottom:10px; }
.mb-l,		._mb-l *	{ margin-bottom:15px; }
.mb-xl,		._mb-xl *	{ margin-bottom:20px; }
.mb-xxl,	._mb-xxl *	{ margin-bottom:25px; } 
.mb-xxxl,	._mb-xxxl * { margin-bottom:30px; } 
.m-0a,		._m-0a *	{ margin:0 auto; }

.fl { float:left; }
.fr { float:right; }
.fc { clear:both; }
.fc-fix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.fc-fix { display: inline-block; }
html[xmlns] .fc-fix { display: block; }
* html .fc-fix { height: 1%; }

.oflo-hide { overflow:hidden; }
.oflo-auto { overflow:auto; }
.oflo-vibl { overflow:visible; }
.oflo-scrl { overflow:scroll; }

.unbold{ font-weight:normal; }
.bold  { font-weight:bold; }
.uline, { text-decoration:underline; }
.unuline { text-decoration:none; }
.strike { text-decoration:line-through; }
.unstrike { text-decoration:none; }
.italic { font-style:italic; }
.unitalic { font-style:normal; }

.align-l { text-align:left; }
.align-r { text-align:right; }
.align-c { text-align:center; }

.valign-t { vertical-align:top; }
.valign-m { vertical-align:middle; }
.valign-b { vertical-align:bottom; }

.txt-xs  { font-size:1em * (10px / @body-font-size); } 
.txt-s   { font-size:1em * (11px / @body-font-size); }
.txt-m   { font-size:1em * (12px / @body-font-size); }
.txt-l   { font-size:1em * (13px / @body-font-size); }
.txt-xl, h6 { font-size:1em * (14px / @body-font-size); }
.txt-2xl, h5 { font-size:1em * (15px / @body-font-size); }
.txt-3xl, h4 { font-size:1em * (16px / @body-font-size); }
.txt-4xl, h3 { font-size:1em * (18px / @body-font-size); }
.txt-5xl, h2 { font-size:1em * (20px / @body-font-size); }
.txt-6xl, h1 { font-size:1em * (22px / @body-font-size); }
.txt-7xl { font-size:1em * (25px / @body-font-size); }

.clickable { cursor:pointer; }
.non-clickable { cursor:default; }


/* to normalize issue of vertical label alignment with checkbox in most browsers */
label._cb {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

/* to normalize issue of vertical label alignment with checkbox in most browsers */
input._cb {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}